<template>
  <div class='rank-container'
       :style='{bottom: contentBottom + "px"}'>
    <Scroll class="topList"
            ref="scroll"
            :data='rankList'>
      <ul>
        <li v-for="(item, index) in rankList"
            :key="index"
            class='rank-item flex_center'
            @click='toRankDetail(item)'>
          <img v-lazy='item.picUrl'
               alt=""
               class='pic'>
          <div class="rank-des">
            <div v-for="(song,i) in item.songList"
                 :key="i">
              <span>{{ i+1 }}</span>{{song.songname}}-{{song.singername}}
            </div>
          </div>
        </li>
      </ul>
    </Scroll>
    <transition name='fade'>
      <div class="loading-container"
           v-show="!rankList.length">
        <loading></loading>
      </div>
    </transition>
    <transition name='slide'
                mode='out-in'>
      <router-view></router-view>
    </transition>
  </div>
</template>

<script>
import { getRank } from 'api/rank'
import { awaitWrap } from 'common/js/dom'
import { ERR_OK } from 'api/config'
import Scroll from 'base/scroll/scroll'
import Loading from 'base/loading/loading'
import { mapMutations } from 'vuex'
import { SET_RANK } from 'store/mutation_types'
import { playMiniMixin } from 'common/js/mixin'
export default {
  mixins: [playMiniMixin],
  data () {
    return {
      rankList: []
    }
  },
  created () {
    this._getRank()
  },
  methods: {
    toRankDetail (item) {
      this.$router.push(`/rank/${item.id}`)
      this.setRank(item)
    },
    async _getRank () {
      const [err, data] = await awaitWrap(getRank())
      if (data.code === ERR_OK) {
        this.rankList = data.data.topList
      }
      console.log(this.content_bottom)
      if (err) { }
    },
    refresh () {
      this.$refs.scroll.refresh()
    },
    ...mapMutations({
      setRank: SET_RANK
    })
  },
  components: {
    Scroll,
    Loading
  }
}
</script>

<style scoped lang='stylus'  rel='stylesheet/stylus'>
@import '~common/stylus/variable.styl'
@import '~common/stylus/mixin.styl'
.rank-container
  position fixed
  width 100%
  top 88px
  bottom 0
  .topList
    height 100%
    overflow hidden
    .rank-item
      margin 0 20px
      padding-top 20px
      height 100px
      &:last-child
        padding-bottom 20px
      background $color-t
      .pic
        flex-basis 100
        width 100px
        height 100px
      .rank-des
        flex 1
        overflow hidden
        padding 0 20px
        height 100px
        background $color-highlight-background
        color $color-text-d
        font-size $font-size-small
        &>div
          no-wrap()
          line-height 33px
          span
            margin-right 5px
</style>